<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <th:block th:include="include :: header('修改文章')" />
    <link rel="stylesheet" th:href="@{/editorMD/css/editormd.css}">
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script  th:src="@{/editorMD/editormd.js}" ></script>
    <script th:src="@{/component/layui/layui.js}"></script>
    <script th:src="@{/component/pear/pear.js}"></script>
    <script th:src="@{/component/pear/uploadImg.js}"></script>
    <style>
        .my-editor li {
            list-style: auto;
        }
        .markdown-body li {
            list-style: auto;
        }
    </style>
</head>

<body>

    <!-- 主体区 -->
        <div class="layui-container">
            <div class="layui-row">

                <div class="layui-btn-group ">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="editMdContent()">
                        <i class="layui-icon">&#xe642;</i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </div>


                <div class="edit-containser">
                    <input id="article-id" style="display: none" th:value="${articleId}">
                    <div id="my-editor" >
                        <textarea id="editormd-content" class="editormd-markdown-textarea" name="doc" style="display:none ;" th:text="${mdContent == null ? '### 测试数据 ' : mdContent}">

                        </textarea>
                        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
                        <!-- <textarea class="editormd-html-textarea" name="html"></textarea> -->
                    </div>
                </div>
            </div>

        </div>
</body>

<script type="text/javascript">
    let prefix = "/spider/article/";
    var testEditor;
    $(function() {
            testEditor = editormd("my-editor", {
            width: "100%",
            height: "100%",
            syncScrolling: "single",
            path: "/editorMD/lib/",
            //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
            saveHTMLToTextarea: true,
            emoji: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/spider/article/uploadImage", //注意你后端的上传图片服务地址
            onload: function() {
                this.width("100%");
                this.height("100%");
                initPasteDragImg(this); //必须
            }
        });


    });

    var content = $('.editormd-markdown-textarea').val();


    function editMdContent() {
        let mdContentVal = $('.editormd-markdown-textarea').val();
        let articleId = $('#article-id').val();
        $.ajax({
            url: prefix+'update',
            data: JSON.stringify({mdContent: mdContentVal,articleId:articleId}),
            dataType: 'json',
            contentType: 'application/json',
            type: 'put',
            success: function (result) {
                if (result.success) {
                    layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        parent.layui.table.reload("article-table");
                    });
                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }
        })
    }
</script>

</html>